<!DOCTYPE html>
<style>
    body {
        background-color: red;
    }

    #image {
        width: 50px;
        height: 50px;
        background-image: url('resources/grid-transparent.png');
        -webkit-user-drag: element;
    }
</style>
<body>
    <!-- Simulate dragging an element and dump the generated drag image.
         The expected result should be the same as the input image,
         without seeing a red background. -->
    <div id="image"></div>
</body>
<script>
    function drag() {
        testRunner.dumpDragImage();

        var image = document.getElementById('image');
        var startX = image.offsetLeft + image.offsetWidth / 2;
        var startY = image.offsetTop + image.offsetHeight / 2;
        var positionX = startX + image.offsetWidth;
        var positionY = startY + image.offsetHeight;

        eventSender.dragMode = true;
        eventSender.mouseMoveTo(startX, startY);
        eventSender.mouseDown();
        eventSender.mouseMoveTo(positionX, positionY);
        eventSender.mouseUp();
    }

    if (!window.testRunner || !window.eventSender) {
        document.write("This test does not work in manual mode.");
    } else {
        window.onload = drag;
    }
</script>
